function advert_click_count() {
    showTableAndEcharts();
    $.ajax({
        method:"POST",
        url:"advertClickCount",
        success:function (data) {

            $("#tip").html("<h3>实时广告流量统计表格</h3>");
            $("#echart-tip").html("<h3>实时广告流量统计图表</h3>");

            var jsonArr = JSON.parse(data);

            //传递数据
            advert_click_count_table(jsonArr);
            //传递数据
            advert_click_count_echart(jsonArr);


        }
    });
}

function stopColor() {
    clearInterval(startAdvert);
}

var startAdvert;
var a = 0;
var isFlag = true;
function advert_click_count_table(jsonArr) {
    a = a + 1;
    console.log(a);
    if (isFlag) {
        startAdvert = setInterval(function(){ advert_click_count() }, 1000);
        isFlag = false;
    }

    //重置表头
    $("#head-tr").empty();
    $("#head-tr").append("<th>ID</th><th>广告名</th><th>点击量</th>");

    //重置表的数据
    $("tbody").empty();

    $.each(jsonArr, function (index, sexCount) {

        if (index % 2 === 0) {
            $("tbody").append("<tr class='active'><td>" + sexCount.id + "</td><td>" + sexCount.name +
                "</td><td>" + sexCount.count + "</td></tr>");
        } else {
            $("tbody").append("<tr class='info'><td>" + sexCount.id + "</td><td>" + sexCount.name +
                "</td><td>" + sexCount.count + "</td></tr>");
        }
    });

    $("tbody tr").on("mouseenter", this, function() {
        color = $(this).attr("class");
        $(this).removeClass(color);
        $(this).addClass("success");
    });
    $("tbody tr").on("mouseleave", this, function() {
        $(this).removeClass("success");
        $(this).addClass(color);
    });
}


function advert_click_count_echart(jsonArr) {

    //添加图表对应的容器
    $("#dataEcharts div:gt(0)").remove();
    $("#dataEcharts").append('<div id="totalType" style="width: 800px; height: 500px"></div>');

    var anames = [];
    var datas = [];
    $.each(jsonArr, function (index, advert) {
        anames.push(advert.name);
        datas.push(advert.count)
    });

    var totalPUV = echarts.init(document.getElementById("totalType"));
    var option = {
        tooltip: {
            trigger: 'item'
        },
        grid: {
            left: "200px"
        },
        xAxis: {
            max: "dataMax"
        },
        yAxis: {
            data: anames
        },
        series: {
            type: 'bar',
            data: datas,
            label: {
                show: true,
                position: "right",
                valueAnimation: true
            }
        },
        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: "linear",
        animationEasingUpdate: "linear"
    };

    totalPUV.setOption(option);

}

